<template>
  <div>
    <div class="head">
      <van-icon class="arrow-left" name="arrow-left" @click="goBack" /> 注册
    </div>
    <div class="remider">
      <van-image
        width="100"
        height="100"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      <p>我们将以短信形式将验证码发送给您</p>
    </div>
    <div class="ipt">
      <!-- <van-field v-model="text" placeholder="请输入手机号" class="tel" />
      <van-button class="getCodebtn" round type="info">获取验证码</van-button> -->
      <van-field
        v-model="sms"
        center
        clearable
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button size="small" class="getCodebtn" type="primary">发送验证码</van-button>
        </template>
      </van-field>
    </div>
    <van-button
      @click="goReg2"
      class="btn"
      color="linear-gradient(to right, #ff6034, #ee0a24)"
    >
      下一步
    </van-button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Reg",
  data() {
    return {
      username: "lcg110",
      userpass: "123666",
      userpass2: "123666",
      code: "",
      randomCode: "",
      msg: "",
    };
  },
  created() {
    this.getRandomCode();
  },
  methods: {
    goBack() {
      this.$router.back();
    },

    goReg2() {
      this.$router.push("/Reg2");
    },

    // 产生随机验证码
    getRandomCode() {
      let str = "";
      for (let i = 0; i < 4; i++) {
        str += parseInt(Math.random() * 10);
      }
      this.randomCode = str;
    },
    // 注册
    regSave() {
      this.msg = "";
      // 一、前端验证：
      // 非空验证？

      // 1、用户名格式的验证
      // 数字字母下划线，6-12位，不能数字开头
      let regluar = /^[a-z_]\w{5,11}$/i;
      if (!regluar.test(this.username)) {
        this.msg =
          "用户名格式不正确，应该是：数字字母下划线，6-12位，不能数字开头";
        return;
      }

      // 2、两次密码是否一致
      if (this.userpass != this.userpass2) {
        this.msg = "两次密码不一致";
        return;
      }
      // 3、验证码是否正确
      if (this.code != this.randomCode) {
        this.msg = "验证码不正确";
        this.getRandomCode();
        return;
      }

      // 二、注册

      // data（发送给后端的数据使用json格式）：content-type是application/json。
      // axios({
      //     url:"http://localhost:3000/vips",
      //     method:"post",
      //     data:{
      //         username:this.username,
      //         userpass:this.userpass
      //     }
      // })
      // .then(res=>{
      //     // console.log("res.data",res.data);
      //     if(res.data){
      //         this.msg="注册成功！";
      //     }else{
      //         this.msg="注册失败！";
      //     }
      // })
      axios
        .post("http://121.89.205.189:3001/api/user/dofinishregister", {
          tel: this.username,
          userpass: this.userpass,
        })
        .then((res) => {
          // console.log("res.data",res.data);
          if (res.data) {
            this.msg = "注册成功！";
          } else {
            this.msg = "注册失败！";
          }
        });
    },
  },
};
</script>

<style scoped>
.head {
  position: relative;
  height: 3rem;
  background-color: antiquewhite;
  text-align: center;
  line-height: 3rem;
}
.arrow-left {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.ipt {
  width: 20rem;
  /* height: 6rem; */
  margin: 2rem auto;
}
.btn {
  margin: 0 auto;
  width: 80%;
  display: block;
  border-radius: 5rem;
}
.goreg {
  text-align: right;
  margin: 1rem;
  font-size: 0.7rem;
  color: blue;
}
.goreg:active {
  color: rgb(255, 77, 0);
}
.remider {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.8rem;
}
.getCodebtn {
  background-color: pink;
  color: red;
  border: 0;
  border-radius: 3rem;
}
</style>